<script lang="ts">
	import {
		Activity,
		Backpack,
		BookOpenText,
		Footprints,
		GraduationCap,
		LibraryBig,
		LineSquiggle,
		MapPin,
		MemoryStick,
		Microchip,
		ShieldCheck,
		SquareUserRound,
		SwatchBook
	} from 'lucide-svelte';
	import type { NodeType } from '../types';
	import { roadmapStore } from '../store.svelte';
	import { appStore } from '$lib/stores/app.svelte';
</script>

{#snippet nodeType(nodeType: NodeType, nodeTypeName: string)}
	<div
		role="none"
		title="可拖动到面板上"
		class="flex gap-2 bg-base-300 btn pl-2 pr-2"
		draggable={true}
		ondragstart={(e) => {
			roadmapStore.targetNodeType = nodeType;
			roadmapStore.targetDropPosition = null;
			if (e.dataTransfer != null) {
				e.dataTransfer.effectAllowed = 'move';
			}
		}}
		onclick={() => {
			appStore.addToastMessage({
				level: 'warning',
				content: '请拖动到面板上',
				keepTime: 2000
			});
		}}
	>
		{#if nodeType == 'JobData'}
			<Backpack />
		{:else if nodeType == 'InterviewSkillData'}
			<MemoryStick />
		{:else if nodeType == 'SkillData'}
			<Microchip />
		{:else if nodeType == 'CertificateData'}
			<ShieldCheck />
		{:else if nodeType == 'ActivityData'}
			<Activity />
		{:else if nodeType == 'InnerResourceData'}
			<LibraryBig />
		{:else if nodeType == 'StudyResourceData'}
			<BookOpenText />
		{:else if nodeType == 'LearnStepData'}
			<Footprints />
		{:else if nodeType == 'KnowledgePointData'}
			<MapPin />
		{:else if nodeType == 'CharacterData'}
			<SquareUserRound />
		{:else if nodeType == 'RelateRoadmapData'}
			<LineSquiggle />
		{:else if nodeType == 'EduLevelData'}
			<GraduationCap />
		{:else if nodeType == 'MajorData'}
			<SwatchBook />
		{/if}
		{nodeTypeName}
	</div>
{/snippet}

<div class="collapse collapse-arrow bg-base-200 w-[320px] rounded-box">
	<input type="checkbox" checked />
	<div class="collapse-title font-semibold">成长节点库</div>
	<div class="collapse-content text-sm prose">
		<h3>就业</h3>
		<div class="flex flex-wrap gap-2">
			{@render nodeType('JobData', '职位')}
			{@render nodeType('InterviewSkillData', '面试技巧')}
			{@render nodeType('SkillData', '技能')}
			{@render nodeType('CertificateData', '证书')}
			{@render nodeType('ActivityData', '社会活动')}
		</div>
		<h3>成长</h3>
		<div class="flex flex-wrap gap-2">
			{@render nodeType('InnerResourceData', '资料库')}
			{@render nodeType('StudyResourceData', '学习资源')}
			{@render nodeType('LearnStepData', '学习步骤')}
			{@render nodeType('KnowledgePointData', '知识点')}
		</div>
		<h3>其他</h3>
		<div class="flex flex-wrap gap-2">
			{@render nodeType('EduLevelData', '学历')}
			{@render nodeType('MajorData', '专业')}
			{@render nodeType('CharacterData', '性格')}
			{@render nodeType('RelateRoadmapData', '相关路线图')}
		</div>
	</div>
</div>
